<template>
	<view style="overflow-x: hidden;background-color: #f3f4f9;height: 1200rpx;">
		<view class="lz-status_bar" style="background-color: #1a1f35;color: #ffffff;">
		    <view class="lz-top_view"></view>
		</view> 
		<view class="kaoshi-head" style="background-color: #1a1f35;color: #ffffff;">
		    <view class="kaoshi-head-top">
		        <view class="kaoshi-head-left" @tap="$navigateBack">
		            <view class="iconfont icon-zuojiantou"></view>
		        </view>
		        <view class="kaoshi-head-m">激活通道</view>
		    </view>
		</view>
		<view class="bg">
			<image class="bg-img" src="/static/vip/bg.png" mode=""></image>
		</view>
	
		<view class="info" >
			<view style="width: 100%;text-align:center;margin: auto;font-weight: 900;padding-top: 50rpx;font-size: 35rpx;">激活码兑换题库</view>
			<view style="width: 100%;text-align:center;margin: auto;color: gainsboro;font-size: 23rpx;margin-top: 20rpx;">----输入有效激活码获取题库/试卷----</view>
			<uni-data-picker  placeholder="请选择科目" popup-title="请选择章节" :localdata="dataTree" v-model="classes"
				@change="onchange">
			</uni-data-picker>
			
			<view class="info-content-jh">
				<view>
					<text style="color: red;">*</text><text>激活码</text></br>
					<input type="text" @input="onInput" placeholder="请输入激活码" />
				</view>
			</view>
			
			
			<view class="button update" hover-class="hover" @click="updateNow" style="margin-bottom: 50rpx;">
				<text class="button-text" @tap="submitCode()" >立即激活</text>
			</view>
		</view>
		
		<view style="background-color: #ffffff;height: 730rpx;">
			<view class="main-title">
				<text >激活记录</text>
			</view>
			
			<u-empty
					
					mode="history"
					icon="https://shuati26.kptedu.com/uploads/image/wushuati.png"
					text="您还没有激活记录,快去激活吧~"
					textColor="#666"
					
					width="300rpx"
					height="300rpx"
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	export default {
		data() {
			return {
				statusBarHeight,
				setCode:'',
				classes: '',
				chooseSubject:0,
				chooseUnit:0,
				dataTree: []
			}
		},
		onShow() {
			this.get_unitActivate_list();
			
		},
		methods: {
			onchange(e) {
				const value = e.detail.value
				this.chooseSubject = value[0]['value']
				this.chooseUnit = value[1]['value']
			},
			back() {			
				    let pages = getCurrentPages(); // 当前页面
				    let beforePage = pages[pages.length - 2]; // 前一个页面
				     uni.navigateBack({
				     delta: 1,
				     success: function() {
				      beforePage.$vm.initData(); // 执行前一个页面的刷新 （initData是我自己定义的方法）
				     }
				    });
				
				   
				uni.showToast({
					
					icon: "none",
					title: "返回"
				})
			},
			onInput(e) {
						   console.log(e,'code')
						   this.setCode=e.detail.value
			},
			async get_unitActivate_list() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.unitActivateList,
					data: {
						province: uni.getStorageSync('choose_cityName')
					},
				});
				if (res.code === 1) {
					this.dataTree = res.data.data
				}
			},
			async submitCode(){
				if(this.chooseSubject && this.chooseUnit){
					let res = await this.$myHttp.post({
						url: this.$myHttp.urlMap.doSetCode,
						data: {
							setCode:this.setCode,
							subject_id:this.chooseSubject,
							unit_id:this.chooseUnit,
							province:uni.getStorageSync('choose_cityName')
						},
						needLogin: true
					});
					if (res.code === 1) {
						this.showModal=!1
						uni.showToast({
							title: res.data.message,
							icon:'none',
							duration:3000
						})
					}
				}else{
					uni.showToast({
						title: '请先选择科目和章节',
						icon:'none',
						duration:3000
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.recharge-tagf{
		position: absolute;
		top: -2rpx;
		left: -2rpx;
		background-image: url('../../../static/vip/tag.png');
		background-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 37rpx;
		
		
	}
	
	
	
	.main-title {
		padding: 30rpx 30rpx;
		font-size: 34rpx;
		color: #1C1C1C;
		font-weight: 600;
	}
	
	.tip {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #A5A3A2;
	}
	
	.rmb {
		font-size: 26rpx;
		color: #E3BE83;
	}
	
	.bg {
		position: absolute;
		top: 85px;
		left: 0;
		right: 0;
		height: 200rpx;
		z-index: 9;
		
		&-img {
			width: 100%;
			height: 100%;
			border-bottom-right-radius: 15px;
		}
	}
	
	.hover {
		opacity: 0.7;
	}
	
	.nav {
		position: fixed;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 44px;
		padding: 0 30rpx;
		background-image: url('~@/static/vip/nav-bg.png');
		background-size: 100%;
		z-index: 99;
		
		&-back {
			width: 20rpx;
			height: 40rpx;
		}
		
		&-title {
			color: #FFFFFF;
			font-size: 42rpx;
		}
		
		&-space {
			width: 70rpx;
			height: 40rpx;
		}
	}
	
	.info {
		position: relative;
		    width: 93%;
		    height: 550rpx;
		    background-color: #FFFFFF;
		    margin: 85px auto 20rpx;
		    border-radius: 10px;
		    z-index: 99;
			margin-top: 130px;
		&-bg {
			position: absolute;
			width: 730rpx;
			height: 360rpx;
			z-index: -1;
		}
		
		&-content {
			padding: 70rpx 50rpx 0 50rpx;
			margin-bottom: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		
		&-avatar {
			margin-right: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 85rpx;
			height: 85rpx;
			background-color: #fff;
			padding: 1rpx;
			border-radius: 50%;
			
			&-pic {
				width: 83rpx;
				height: 83rpx;
			}
		}
		
		&-name {
			display: flex;
			flex-direction: column;
			color: #FFFFFF;
			font-size: 35rpx;
		}
		
		&-level {
			margin-top: 15rpx;
			font-size: 24rpx;
		}
		
		&-asset {
			padding: 0 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			&-item {
				display: flex;
				flex-direction: column;
			}
		}
	}
	
	.iai {
		&-title {
			margin-bottom: 20rpx;
			margin-right: 100rpx;
			font-size: 24rpx;
			color: #CFB386;
		}
		
		&-value {
			font-size: 35rpx;
			color: #FFFFFF;
		}
	}
	
	.recharge {
		position: relative;
		margin-bottom: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		
		&-tag {
			position: absolute;
			top: -2rpx;
			left: -2rpx;
			width: 170rpx;
			height: 36rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background-image: url('~@/static/vip/tag.png');
			background-size: 100%;
			
			&-text {
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
		
		&-item {
			position: relative;
			padding: 40rpx 0;
			margin-left: 15rpx;
			width: 200rpx;
			height: 230rpx;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			border: solid 2rpx #F2F2F3;
			border-radius: 12rpx;
			
			&-active {
				border-color: #EDD2A9;
				background-color: #FBF1E5;
			}
			
			&-duration {
				margin-bottom: 30rpx;
				font-size: 26rpx;
				color: #1C1C1C;
			}
			
			&-price {
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: baseline;
				
				&-text {
					font-size: 48rpx;
					color: #E3BE83;
				}
			}
			
			&-des {
				font-size: 22rpx;
				color: #A5A3A2;
			}
		}
	}
	
	.button {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 85rpx;
		border-radius: 50rpx;
		background-image: linear-gradient(#EFCF9E, #E4BF85);
		
		&-text {
			font-size: 30rpx;
			color: #1C1C1C;
		}
	}
	
	.update {
		margin: 35rpx 30rpx 20rpx 30rpx;
	}
	
	.privilege {
		padding: 0 30rpx;
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		
		&-item {
			margin: 0 23rpx;
			margin-bottom: 25rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			&-pic {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}
			
			&-text {
				font-size: 24rpx;
				color: #383738;
			}
		}
	}
	
	.level {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 466rpx;
		background-image: url('~@/static/vip/vip-bg.png');
		background-size: 100%;
		
		&-rate {
			position: absolute;
			top: 43rpx;
			left: 33rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			&-text1 {
				margin-right: 20rpx;
				color: #1C1C1C;
				font-size: 34rpx;
			}
			
			&-text2 {
				font-size: 34rpx;
				color: #C07C07;
			}
		}
		
		&-info {
			// position: absolute;
			// top: 188rpx;
			// left: 350rpx;
			margin-top: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			&-icon {
				margin-bottom: 20rpx;
				width: 48rpx;
				height: 38rpx;
			}
			
			&-text {
				margin-bottom: 20rpx;
				font-size: 26rpx;
				color: #292929;
			}
			
			&-integral {
				font-size: 40rpx;
				color: #C07C07;
			}
		}
		
		&-distance {
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 35rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			
			&-text {
				font-size: 26rpx;
				color: #292929;
			}
			
			&-button {
				padding: 0 30rpx;
				height: 60rpx;
			}
		}
	}
	
	.info-content-jh{
		padding: 30rpx 50rpx 0 50rpx;
		    margin-bottom: 50rpx;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
			
	}
	
		
	.info-content-jh input{
		margin-top: 20rpx;
		border-bottom: 1px #A5A3A2 solid;
		width: 600rpx;
		padding-bottom: 10rpx;
		
	}
	/**/
	
</style>
